<template>
  <div>
    <p>商品入库</p>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          size="small"
          @click="addShop"
          >新增商品入库</el-button
        >
        <el-select
          v-model="form.zhuangTai"
          class="handle-select mr10"
          style="width: 120px"
          @change="searchAll"
        >
          <el-option key="1" label="全部" value=""></el-option>
          <el-option key="2" label="已通过" value="0"></el-option>
          <el-option key="3" label="已驳回" value="1"></el-option>
          <el-option key="4" label="待审核" value="2"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch" size="small">查询更多</el-button>
        <el-button type="primary" style="float: right;" size="small"><a href="http://172.16.6.124:8080/gold/goodsWarehousing/export" class="aColor">导出报表</a></el-button>
      </div>
      <!--查询框-->
      <div v-show="isShow">
        <el-form ref="form" :model="search" label-width="70px" :inline="true">
          <el-row style="margin-bottom: 2px">
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-form-item label="单据编号">
                  <el-input
                    v-model="search.danJuB"
                    style="width: 105px"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple" style="margin-left: 10px">
                <el-form-item label="商品类型">
                  <el-select
                    v-model="form.commodity_type"
                    class="handle-select mr10"
                    style="width: 150px"
                    placeholder="请选择"
                    @visible-change="shopLXSearch"
                  >
                    <el-option key="1" label="" value=""></el-option>
                    <el-option
                      v-for="item in list"
                      :key="item.name"
                      :label="item.label"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="供应商">
                  <el-select
                    v-model="form.supplier"
                    class="handle-select mr10"
                    style="width: 150px"
                    placeholder="请选择"
                    @visible-change="shopSearch"
                  >
                    <el-option key="1" label="" value=""></el-option>
                    <el-option
                      v-for="item in list"
                      :key="item.name"
                      :label="item.label"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="入库门店">
                  <el-select
                    v-model="form.instore"
                    class="handle-select mr10"
                    style="width: 150px"
                    placeholder="请选择"
                    @visible-change="menDianSearch"
                  >
                    <el-option key="1" label="" value=""></el-option>
                    <el-option
                      key="1"
                      label="成都总店"
                      value="成都总店"
                    ></el-option>
                    <el-option
                      v-for="item in list"
                      :key="item.name"
                      :label="item.label"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="柜台名称">
                  <el-select
                    v-model="form.countername"
                    class="handle-select mr10"
                    style="width: 150px"
                    placeholder="请选择"
                    @visible-change="guiTaiSearch"
                  >
                    <el-option key="1" label="" value=""></el-option>
                    <el-option
                      v-for="item in list"
                      :key="item.name"
                      :label="item.label"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>

          <el-row style="margin-bottom: 2px">
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-form-item label="创单日期">
                  <el-input
                    v-model="search.createTime"
                    style="width: 105px"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple" style="margin-left: 10px">
                <el-form-item label="订单号">
                  <el-input
                    v-model="search.dingDanH"
                    style="width: 105px"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="来源">
                  <el-select
                    v-model="search.laiYuan"
                    class="handle-select mr10"
                    style="width: 105px"
                  >
                    <el-option key="1" label="" value=""></el-option>
                    <el-option key="2" label="采购" value="采购"></el-option>
                    <el-option key="3" label="代销" value="代销"></el-option>
                    <el-option key="4" label="联销" value="联销"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="创单人">
                  <el-select
                    v-model="search.chuangDanR"
                    class="handle-select mr10"
                    style="width: 100px"
                  >
                    <el-option key="1" label="" value=""></el-option>
                    <el-option key="2" label="lyh" value="lyh"></el-option>
                    <el-option key="3" label="kfq" value="kfq"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-button size="small" @click="searchData">确认查询</el-button>
                <el-button size="small" @click="isShow = false">收起</el-button>
              </div></el-col
            >
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="
          tableData.slice(
            (query.pageIndex - 1) * query.pageSize,
            query.pageIndex * query.pageSize
          )
        "
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="行号" width="55" align="center"
          ><template slot-scope="scope">{{
            (query.pageIndex - 1) * query.pageSize + (scope.$index + 1)
          }}</template></el-table-column
        >
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status === 0
                  ? 'primary'
                  : scope.row.status === 1
                  ? 'danger'
                  : scope.row.status === 2
                  ? 'success'
                  : ''
              "
              >{{
                scope.row.status === 0
                  ? "已通过"
                  : scope.row.status === 1
                  ? "已驳回"
                  : scope.row.status === 2
                  ? "待审核"
                  : ""
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="单据编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="created"
          label="创单日期"
          width="120"
          align="center"
          :formatter="DateHandler"
        ></el-table-column>
        <el-table-column
          prop="commodity_type"
          label="商品类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplier"
          label="供应商"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="instore"
          label="入库门店"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="countername"
          label="柜台/类库名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="order_number"
          label="订单号"
          align="center"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cost"
          label="成本"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="coefficient"
          label="系数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="money"
          label="标签金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="resourse"
          label="来源"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="创单人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="approver"
          label="审批人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="approve_time"
          label="审批日期"
          width="120"
          align="center"
          :formatter="DateHandler"
        ></el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.status === 0" disabled
              >审核</el-button
            >
            <el-button
              type="text"
              v-else-if="scope.row.status === 1"
              @click="cheXiaoB(scope.row)"
              >撤销驳回</el-button
            >
            <el-button
              type="text"
              v-else-if="scope.row.status === 2"
              @click="shenPi(scope.$index, scope.row)"
              >审批</el-button
            >
            <el-button type="text" v-else>{{ scope.row.caoZuo }}</el-button>
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button type="text" v-if="scope.row.status === 0" disabled
              >删除</el-button
            >
            <el-button
                type="text"
                class="red"
                @click="handleDelete(scope)"
            v-else>删除</el-button>
            <el-button
                type="text"
                class="red"
                @click="orderDetails(scope)"
                >订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
        <!--bug----------------9-28---------->
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog
      title="修改编辑"
      :visible.sync="editVisible"
      width="60%"
      align="center"
    >
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-row style="margin-bottom: 2px">
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="行号">
            <el-input v-model="form.id" readonly="readonly" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="状态">
            <el-select v-model="form.status" style="width: 150px" disabled>
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="单据编号">
            <el-input v-model="form.number"  readonly="readonly" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
        <el-col :span="8"><div class="grid-content bg-purple">
          <div class="block">
            <span class="demonstration">创单日期</span>
            <el-date-picker
                v-model="form.created"
                align="right"
                type="date"
                style="width: 150px"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="商品类型">
            <el-select v-model="form.commodity_type" class="handle-select mr10" style="width: 150px"
                       placeholder="请选择" @visible-change="shopLXSearch">
              <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="供应商">
            <el-select v-model="form.supplier" class="handle-select mr10" style="width: 150px" placeholder="请选择" @visible-change="shopSearch">
              <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="入库门店">
            <el-select v-model="form.instore" class="handle-select mr10" style="width: 150px" placeholder="请选择" @visible-change="menDianSearch">
              <el-option key="1" label="成都总店" value="成都总店"></el-option>
              <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="柜台/类库名称">
            <el-select v-model="form.countername" class="handle-select mr10" style="width: 150px" placeholder="请选择" @visible-change="guiTaiSearch">
              <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="订单号">
            <el-input v-model="form.order_number" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
       </el-row>

        <el-row style="margin-bottom: 2px">
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="数量">
            <el-input v-model="form.amount" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="重量">
            <el-input v-model="form.weight" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="成本">
            <el-input v-model="form.cost" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="系数">
            <el-input v-model="form.coefficient" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="标签金额">
            <el-input v-model="form.money" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="来源">
            <el-input v-model="form.resourse" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="创单人">
            <el-input v-model="form.creator" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-form-item label="审批人">
            <el-input v-model="form.approver" style="width: 150px"></el-input>
          </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <div class="block">
            <span class="demonstration">审批日期</span>
            <el-date-picker
                v-model="form.approve_time"
                align="right"
                type="date"
                placeholder="选择日期"
                style="width: 150px"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div></el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveDept" size="small">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 订单详情弹出框 -->
    <el-dialog title="订单商品详情" :visible.sync="orderVisible" width="80%" align="center" style="font-size: 24px">
      <el-form ref="form" :model="form" label-width="100px" :inline="true">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="单据编号">
              <el-input v-model="shopForm.number" style="width: 150px" disabled></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-button type="primary" plain @click="addShopList">新增商品</el-button>
          </div></el-col>

        </el-row>
      </el-form>
      <el-table
          :data="shopData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="行号"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="commodity_code"
            label="商品编码"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="commodity_name"
            label="商品名称"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="mold_number"
            label="模具号"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="conditions"
            label="成色"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="brand"
            label="品牌"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="price_type"
            label="价格类型"
            width="140"
            align="center">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="140">
          <template slot-scope="scope">
            <el-button @click="shopEdit(scope.$index, scope.row)" type="text">商品编辑</el-button>
            <el-button type="text" @click="shopDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" plain @click="orderVisible = false" size="small">保 存</el-button>
      </span>
    </el-dialog>
    <!--新增商品弹出框-->
    <el-dialog title="新增商品" :visible.sync="addShopVisible" width="60%" align="center" @close="resetValue2">
      <el-form ref="shopForm" :model="shopForm" label-width="70px" :inline="true">
        <el-row style="margin-bottom: 2px">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="行号" prop="id">
              <el-input v-model="shopForm.id" style="width: 150px" disabled></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="商品编码" prop="commodity_code">
              <el-input
                  style="width: 150px;"
                  v-model="shopForm.commodity_code"
                  >
              </el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="商品名称" prop="commodity_name">
              <el-input v-model="shopForm.commodity_name" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="模具号" prop="mold_number">
              <el-input v-model="shopForm.mold_number" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="成色" prop="conditions">
              <el-input
                  style="width: 150px;"
                  v-model="shopForm.conditions"
                  >
              </el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="单据编号" prop="number">
              <el-input v-model="shopForm.number" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="品牌" prop="brand">
              <el-input
                  style="width: 150px;"
                  v-model="shopForm.brand"
                  >
              </el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="价格类型" prop="price_type">
              <el-input v-model="shopForm.price_type" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="tianJiaShop" size="small">添 加</el-button>
      </span>
    </el-dialog>
    <!--商品编辑框-->
    <el-dialog title="商品编辑" :visible.sync="shopBJVisible" width="60%" align="center">
      <el-form ref="form" :model="shopForm" label-width="70px" :inline="true">
        <el-row style="margin-bottom: 2px">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="行号" prop="id">
              <el-input v-model="shopForm.id" style="width: 150px" disabled></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="商品编码" prop="status">
              <el-input
                  style="width: 150px;"
                  v-model="shopForm.commodity_code"
              >
              </el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="商品名称" prop="number">
              <el-input v-model="shopForm.commodity_name" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="模具号" prop="mold_number">
              <el-input v-model="shopForm.mold_number" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="成色" prop="conditions">
              <el-input
                  style="width: 150px;"
                  v-model="shopForm.conditions"
              >
              </el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="单据编号" prop="number">
              <el-input v-model="shopForm.number" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="品牌" prop="status">
              <el-input
                  style="width: 150px;"
                  v-model="shopForm.brand"
              >
              </el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="价格类型" prop="number">
              <el-input v-model="shopForm.price_type" style="width: 150px"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="shopBianJi" size="small">保 存</el-button>
      </span>
    </el-dialog>
    <!--新增商品入库框-->
    <el-dialog
      title="新增商品入库"
      :visible.sync="addVisible"
      width="60%"
      align="center"
      @close="resetValue"
    >
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="行号" prop="id">
                <el-input
                  v-model="form.id"
                  style="width: 150px"
                  disabled
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="状态" prop="status">
                <el-input
                  style="width: 150px;"
                  v-model="form.status"
                  :disabled="true"
                >
                </el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="单据编号" prop="number">
                <el-input v-model="form.number" style="width: 150px"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">创单日期</span>
                <el-date-picker
                  v-model="form.created"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  style="width: 150px"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="商品类型" prop="commodity_type">
                <el-select
                  v-model="form.commodity_type"
                  class="handle-select mr10"
                  style="width: 150px"
                  placeholder="请选择"
                  @visible-change="shopLXSearch"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.name"
                    :label="item.label"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="供应商" prop="supplier">
                <el-select
                  v-model="form.supplier"
                  class="handle-select mr10"
                  style="width: 150px"
                  placeholder="请选择"
                  @visible-change="shopSearch"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.name"
                    :label="item.label"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="入库门店" prop="instore">
                <el-select
                  v-model="form.instore"
                  class="handle-select mr10"
                  style="width: 150px"
                  placeholder="请选择"
                  @visible-change="menDianSearch"
                >
                  <el-option
                    key="1"
                    label="成都总店"
                    value="成都总店"
                  ></el-option>
                  <el-option
                    v-for="item in list"
                    :key="item.name"
                    :label="item.label"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="柜台/类库名称" prop="countername">
                <el-select
                  v-model="form.countername"
                  class="handle-select mr10"
                  style="width: 150px"
                  placeholder="请选择"
                  @visible-change="guiTaiSearch"
                >
                  <el-option
                    v-for="item in list"
                    :key="item.name"
                    :label="item.label"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="订单号" prop="order_number">
                <el-input
                  v-model="form.order_number"
                  style="width: 150px"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="数量">
                <el-input v-model="form.amount" style="width: 150px"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="重量">
                <el-input v-model="form.weight" style="width: 150px"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="成本">
                <el-input v-model="form.cost" style="width: 150px"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="系数" prop="coefficient">
                <el-input
                  v-model="form.coefficient"
                  style="width: 150px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="标签金额" prop="money">
                <el-input v-model="form.money" style="width: 150px"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="来源" prop="resourse">
                <el-select
                  v-model="form.resourse"
                  class="handle-select mr10"
                  style="width: 150px"
                >
                  <el-option key="1" label="采购" value="采购"></el-option>
                  <el-option key="2" label="代销" value="代销"></el-option>
                  <el-option key="2" label="联销" value="联销"></el-option>
                  <el-option key="2" label="加工" value="加工"></el-option>
                  <el-option key="2" label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="创单人" prop="creator">
                <el-input
                  v-model="form.creator"
                  style="width: 150px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="审批人" prop="approver">
                <el-input
                  v-model="form.approver"
                  style="width: 150px"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">审批日期</span>
                <el-date-picker
                  v-model="form.approve_time"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  style="width: 150px"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div></div
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addShopRK" size="small"
          >添 加</el-button
        >
      </span>
    </el-dialog>

    <!--审批编辑框-->
    <el-dialog
      title="商品入库单审批"
      :visible.sync="shenPiVisible"
      width="60%"
      align="center"
    >
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="行号">
                <el-input v-model="form.id" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="状态">
                <el-input v-model="form.status" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="单据编号">
                <el-input v-model="form.number" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="block" readonly="readonly">
                <span class="demonstration">创单日期</span>
                <el-date-picker
                  v-model="form.created"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  disabled
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="商品类型">
                <el-input
                  v-model="form.commodity_type"
                  :disabled="true"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="供应商">
                <el-input v-model="form.supplier" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="入库门店">
                <el-input v-model="form.instore" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="柜台/类库名称">
                <el-input
                  v-model="form.countername"
                  :disabled="true"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="订单号">
                <el-input
                  v-model="form.order_number"
                  :disabled="true"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="数量">
                <el-input v-model="form.amount" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="重量">
                <el-input v-model="form.weight" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="成本">
                <el-input v-model="form.cost" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="系数">
                <el-input
                  v-model="form.coefficient"
                  :disabled="true"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="标签金额">
                <el-input v-model="form.money" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="来源">
                <el-input v-model="form.resourse" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <el-row style="margin-bottom: 2px">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="创单人">
                <el-input v-model="form.creator" :disabled="true"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="审批人">
                <el-input v-model="form.approver"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <div class="block">
                <span class="demonstration">审批日期</span>
                <el-date-picker
                  v-model="form.approve_time"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div></div
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" size="small">取 消</el-button>
        <el-button @click="shenPiT" size="small" type="success" plain
          >审批通过</el-button
        >
        <el-button @click="shenPiB" size="small" type="primary" plain
          >审批驳回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      options: [
        {
          value: "0",
          label: "已通过",
          disabled: true
        },
        {
          value: "1",
          label: "已驳回",
          disabled: true
        },
        {
          value: "2",
          label: "待审核"
        }
      ],
      value: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 6
      },
      inject: ["reload"],
      props: {},
      list: [],
      search: {
        danJuB: "",
        shopLX: "",
        gongYS: "",
        menDian: "",
        guiTaiM: "",
        createTime: "",
        dingDanH: "",
        laiYuan: "",
        chuangDanR: ""
      },
      isShow: false,
      select: {
        leiXing: "",
        fangShi: ""
      },
      select1: '',
      shopForm:{
        number:'',
        commodity_code:'',
        commodity_name:'',
        mold_number:'',
        conditions:'',
        brand:'',
        price_type:'',
        weight:'',
        amount:''
      },
      form: {
        id:'',
        status:'2',
        zhuangTai:'',
        countername:'',
        supplier:'',
        instore:'',
        shopBianM:'',
        commodity_type:'',
        resourse:'',
        order_number:'',
        cost:'',
        coefficient:'',
        money:'',
        creator:'',
        approver:'',
        approve_time:'',
        caoZuo:["已通过","已驳回","待审核"]
      },
      arr1: [],
      tableData: [],
      shopData:[],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      shenPiVisible:false,
      addVisible:false,
      addShopVisible:false,
      orderVisible:false,
      dangerouslyUseHTMLString:false,
      shopBJVisible:false,
      pageTotal: 0,
      idx: -1,
      id: -1,
      list1:[],
      list2:[],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //z转换日期
    DateHandler: function(row) {
      return new Date(row.approve_time).toLocaleDateString();
    },
    //订单详情弹出框
    orderDetails(scope){
      this.orderVisible = true
      this.shopForm.number=scope.row.number
      this.getShopData()
      console.log(scope.row.number)
    },
    //重置form的值
    resetValue() {
      console.log(1111);
      this.$refs.form.resetFields();
    },
    resetValue2(){
      console.log(1111);
      this.$refs.shopForm.resetFields();
    },
    //状态查询数据展示
    searchShow() {
      this.$axios
        .post(
          this.$api.branch.findByStatus,
          { status: this.form.zhuangTai },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //通过状态查询
    searchAll() {
      this.$axios
        .post(
          this.$api.branch.findByStatus,
          { status: this.form.zhuangTai },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
      ).then((response)=>{
        console.log(response)
        var result = response.data;
        //debugger +8-09· 
        this.tableData = response.data.data.list;
        console.log(response)
        console.log(this.tableData)
        this.pageTotal = response.data.data.total || 1;
        if(result.msg === '查询成功!'){
          this.$message.success(result.msg)
          this.searchShow()
          this.addVisible = false
        }else {
          this.$message.success(result.msg);
        }
      }).catch((err)=>{
        console.log(err)
        this.$message.error({ message: "请求出错，请检查",center: true,duration: 2000 });
      })
    },
    //供应商类型查询
    shopSearch() {
      this.$axios
        .post(
          this.$api.branch.findSupplier,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          //debugger
          this.list = response.data.data;
          console.log(this.item);
          console.log(this.list);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //商品类型
    shopLXSearch() {
      this.$axios
        .post(
          this.$api.branch.findCommodityType,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          //debugger
          this.list = response.data.data;
          console.log(this.item);
          console.log(this.list);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //入库门店查询
    menDianSearch() {
      this.$axios
        .post(
          this.$api.branch.findInstore,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          //debugger
          this.list = response.data.data;
          console.log(this.item);
          console.log(this.list);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //柜台查询
    guiTaiSearch() {
      this.$axios
        .post(
          this.$api.branch.findCounter,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          //debugger
          this.list = response.data.data;
          console.log(this.item);
          console.log(this.list);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //弹出新增商品入库框
    addShop() {
      this.addVisible = true;
    },
    //弹出新增商品框
    addShopList(){
      this.addShopVisible =true
    },
    //添加入库单操作，接收服务器响应
    addShopRK(){
      this.$axios.post(this.$api.branch.addGoodsWarehousing,
          this.form
          ,{
            headers: {
              "Content-Type": "application/json"
          }
        })
        .then(response => {
          var result = response.data;
          if (result.msg === "添加成功!") {
            this.$message.success(result.msg);
            this.getData();
            this.addVisible = false;
          } else {
            this.$message.success(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //添加商品操作
    tianJiaShop(){
      console.log(this.form)
      this.$axios.post(this.$api.branch.addGoodsinfo,
          this.shopForm
          ,{
            headers: {
              "Content-Type": "application/json"
            }
          }
      ).then((response)=>{
        var result = response.data;
        if(result.msg === '添加成功!'){
          this.$message.success(result.msg)
          this.getShopData()
          this.addShopVisible = false
        }else {
          this.$message.success(result.msg);
        }
      }).catch((err)=>{
        console.log(err)
        this.$message.error({ message: "请求出错，请检查",center: true,duration: 2000 });
      })
    },
    //审批操作
    shenPi(index, row) {
      this.idx = index;
      this.form = { ...row };
      this.shenPiVisible = true;
    },
    //审批通过
    shenPiT() {
      //将修改的状态发给服务器，接收服务器的响应，进行处理
      console.log(this.form.status);
      console.log(this.form.id);
      var state = (this.form.status = 0);
      this.$axios
        .post(
          this.$api.branch.updateGoodsWarehousing,
          {
            status: state,
            id: this.form.id
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data;
          if (result.msg === "编辑成功!") {
            this.$message.success("入库单审核成功!");
            this.getData();
            this.shenPiVisible = false;
          } else {
            this.$alert("审核出错，请重新审核");
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    //审核驳回
    shenPiB() {
      //将修改的状态发给服务器，接收服务器的响应，进行处理
      console.log(this.form.status);
      console.log(this.form.id);
      var state = (this.form.status = 1);
      this.$axios
        .post(
          this.$api.branch.updateGoodsWarehousing,
          {
            status: state,
            id: this.form.id
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data;
          if (result.msg === "编辑成功!") {
            this.$message.success("入库单撤销驳回成功!");
            this.getData();
            this.shenPiVisible = false;
          } else {
            this.$alert("撤销驳回出错，请重新操作");
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //撤销驳回
    cheXiaoB(row) {
      this.$confirm("确定要撤销驳回吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          //将修改的状态发给服务器，接收服务器的响应，进行处理
          console.log(this.form.status);
          console.log(this.form.id);
          var state = (this.form.status = 2);
          this.$axios
            .post(
              this.$api.branch.updateGoodsWarehousing,
              {
                status: state,
                id: row.id
              },
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(response => {
              var result = response.data;
              if (result.msg === "编辑成功!") {
                this.$message.success("撤销驳回成功!");
                this.getData();
                this.shenPiVisible = false;
              } else {
                this.$alert("撤销驳回出错，请重新审核");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error({
                message: "请求出错，请检查",
                center: true,
                duration: 2000
              });
            });
        })
        .catch(() => {});
    },
    // 获取 easy-mock 的模拟数据.
    //向服务器请求数据,获取列表数据
    getData() {
      this.$axios
        .post(this.$api.branch.findAll, {
          params: {
            id: this.id,
            currentPage: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(response => {
          var result = response.data.data.list;
          console.log(response);
          this.$set(this.$data, "tableData", result);
          this.pageTotal = response.data.data.total || 50;
          var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize);
          if (totalPage2 < this.query.pageIndex) {
            this.query.pageIndex = totalPage2;
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //获取商品列表
    getShopData() {
      this.$axios.get(this.$api.branch.findAll2+ "?number=" + this.shopForm.number
      )
          .then(response =>{
            let result = response.data.data;
            console.log(result)
            console.log(response)
            this.$set(this.$data,'shopData',result)
            console.log(this.shopData)
          }).catch(err =>{
        console.log(err)
        this.$message.error({ message: "请求出错，请检查",center: true,duration: 2000 });
      })
    },
    //查询数据展示
    searchDataDesplay() {
      this.$axios
        .post(
          this.$api.branch.find,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //查询操作
    searchData() {
      console.log(this.search);
      console.log(this.query.pageIndex);
      console.log(this.query.pageSize);
      //发起一个请求到服务器，让服务器删除这条数据
      //console.log(row.row.id)
      this.$axios
        .post(
          this.$api.branch.find,
          {
            pageNum: this.query.pageIndex,
            pagesize: this.query.pageSize,
            number: this.search.danJuB,
            commodity_type: this.form.commodity_type,
            supplier: this.form.supplier,
            instore: this.form.instore,
            countername: this.form.countername,
            created: this.search.createTime,
            order_number: this.search.dingDanH,
            resourse: this.search.laiYuan,
            creator: this.search.chuangDanR
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          var result = response.data;
          //debugger
          this.tableData = response.data.data.list;
          console.log(response);
          console.log(this.tableData);
          this.pageTotal = response.data.data.total || 1;
          if (result.msg === "查询成功!") {
            this.searchDataDesplay();
            this.$message.success(result.msg);
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.isShow = true;
    },
    // 删除操作
    handleDelete(row) {
      // 二次确认删除
      console.log(row);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          //发起一个请求到服务器，让服务器删除这条数据
          //console.log(row.row.id)
          this.$axios
            .post(
              this.$api.branch.deleteGoodsWarehousing,
              { id: row.row.id },
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(response => {
              console.log(response);
              var result = response.data;
              //debugger
              console.log(result);
              if (result.msg === "删除成功!") {
                this.getData();
                this.$message.success(result.msg);
              } else {
                this.$alert(result.msg);
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error({
                message: "请求出错，请检查",
                center: true,
                duration: 2000
              });
            });
        })
        .catch(() => {});
    },
    //商品删除
    shopDelete(row) {
      // 二次确认删除
      console.log(row);
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        //发起一个请求到服务器，让服务器删除这条数据
        console.log(row.row.id)
        this.$axios.get(this.$api.branch.deleteGoodsinfo+ "?id=" + row.row.id
        ).then((response)=>{
          console.log(response)
          var result = response.data;
          //debugger
          console.log(result)
          if(result.msg === "删除成功!"){
            this.getShopData()
            this.$message.success(result.msg);
          }else {
            this.$alert(result.msg)
          }
        }).catch((err)=>{
          console.log(err)
          this.$message.error({ message: "请求出错，请检查",center: true,duration: 2000 });
        })
      })
          .catch(() => {});
    },
    //编辑操作--修改数据
    saveDept: function() {
      //将修改的数据发给服务器，接收服务器的响应，进行处理
      console.log(this.form);
      this.$axios
        .post(this.$api.branch.updateGoodsWarehousing, this.form, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          var result = response.data;
          if (result.msg === "编辑成功!") {
            this.$message.success(result.msg);
            this.getData();
            this.editVisible = false;
          } else {
            this.$message.success(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //商品编辑
    shopBianJi:function (){
      //将修改的数据发给服务器，接收服务器的响应，进行处理

      console.log(this.form)
      this.$axios.post(this.$api.branch.updateGoodsinfo,
          this.shopForm
          ,{
            headers: {
              "Content-Type": "application/json"
            }
          }
      ).then((response)=>{
        var result = response.data;
        if(result.msg === '编辑成功!'){
          this.$message.success(result.msg)
          this.getShopData()
          this.shopBJVisible = false
        }else {
          this.$message.success(result.msg);
        }
      }).catch((err)=>{
        console.log(err)
        this.$message.error({ message: "请求出错，请检查",center: true,duration: 2000 });
      })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + " ";
      }
      this.$message.error(`删除了${str}`);
      this.multipleSelection = [];
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.form = { ...row };
      this.editVisible = true;
    },
    //弹出商品编辑框
    shopEdit(index, row) {
      this.idx = index;
      this.shopForm.id = this.form.id;
      this.shopForm = {...row};
      this.shopBJVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange(val) {
      console.log(val);
      this.$set(this.query, "pageIndex", val);
      //this.getData();-----------------------------pass:查询调用查询显示数据对应的函数!!!!!!!!!
      this.searchDataDesplay();
      this.searchShow();
    }
  }
};
</script>

<style scoped>
.btn1 {
  width: 100px;
  height: 50px;
  box-shadow: 1px 1px 2px #000;
  border: 1px solid grey;
  text-align: center;
}
.addShop {
  position: absolute;
  top: 200px;

  background-color: white;
  height: 500px;
  border: 1px solid grey;
  box-shadow: 10px 10px 20px #000;
  color: black;
}
span {
  line-height: 36px;
  text-align: right;
}
p {
  text-align: center;
  font-size: 24px;
  color: rgb(96, 98, 102);
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.aColor {
  color: white;
}
</style>